<script setup lang="ts">
/* 
  1. useRoute 获取参数
  2. 请求页面数据(封装api函数 写类型)
  3. 页面存数据
*/
import { getMedicalOrderLogistics } from '@/services/order'
import type { Location, Logistics } from '@/types/order'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import AMapLoader from '@amap/amap-jsapi-loader' // 导入加载地图的api
import startImg from '@/assets/start.png'
import endImg from '@/assets/end.png'
import carImg from '@/assets/car.png'

// 往window上配置一个安全信息
// window 是内置的一个数据对象 类型也是内置的interface Window
window._AMapSecurityConfig = {
  securityJsCode: '415e917da833efcf2d5b69f4d821784b' // 安全密钥(必须成为高德地图开发者才会拥有)
}

// 获取物流信息
const logistics = ref<Logistics>()
const route = useRoute()
onMounted(async () => {
  const res = await getMedicalOrderLogistics(route.params.id as string)
  logistics.value = res.data

  // 渲染地图会操作dom  最好不要放setup  放onMounted
  AMapLoader.load({
    key: '4eed3d61125c8b9c168fc22414aaef7e',
    version: '2.0'
  }).then((AMap) => {
    // AMap => 地图的构造函数(他不纯粹) => new
    // new AMap.Map('指定盒子的id', 配置对象)
    const map = new AMap.Map('map', {
      zoom: 12, // 缩放
      mapStyle: 'amap://styles/macaron' //设置地图的显示样式
    })
    // console.log(map)

    // 地图初始化结束后 开始利用起点终点经纬度信息 规划路线
    AMap.plugin('AMap.Driving', function () {
      var driving = new AMap.Driving({
        // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
        policy: AMap.DrivingPolicy.LEAST_TIME,
        map: map, // 指定路线规划到哪张地图上
        showTraffic: false, // 关闭实时交通路况的展示
        hideMarkers: true // 隐藏标记物
      })

      // var startLngLat = [116.379028, 39.865042] // 起点坐标(测试)
      // var endLngLat = [116.427281, 39.903719] // 终点坐标(测试)
      if (!logistics.value?.logisticsInfo) return // ts需要你判断这个数据一定是有的
      if (logistics.value?.logisticsInfo.length < 2) return // ts需要你判断这个数据长度一定要>=2

      const list = [...logistics.value.logisticsInfo] // 一定是有数据 且 有2个及以上
      const start = list.shift() // 取出第0项
      const end = list.pop() // 取出最后一项

      /**
       * 添加标记物
       * @param img 标记物图片地址
       * @param cur 标记物的坐标 { long: ,la: }
       * @param width 标记物宽度
       * @param height 标记物高度
       */
      const fn = (
        img: string,
        cur: Location,
        width: number = 25,
        height: number = 30
      ) => {
        // 创建 AMap.Icon 实例：
        const icon = new AMap.Icon({
          image: img, // Icon的图像地址
          size: new AMap.Size(width, height), // 图标尺寸
          imageSize: new AMap.Size(width, height) // 根据所设置的大小拉伸或压缩图片
        })

        // 将 Icon 实例添加到 marker 上:
        const marker = new AMap.Marker({
          position: [cur?.longitude, cur?.latitude],
          offset: new AMap.Pixel(-width / 2, -height),
          icon: icon // 添加 Icon 实例
        })

        map.add(marker)
      }

      fn(startImg, start!) // 快速得到一个起点标记物
      fn(endImg, end!) // 快速得到一个起点标记物
      fn(carImg, logistics.value.currentLocationInfo, 25, 15) // 快速得到一个🚗标记物

      driving.search(
        [start?.longitude, start?.latitude], // 起点
        [end?.longitude, end?.latitude], // 终点
        {
          waypoints: list.map((item) => [item.longitude, item.latitude])
        }, // 额外的数据(途径点)
        function () {
          // 只要执行这个回调了 表示路线规划结束了
        }
      )
    })
  })
})
</script>

<template>
  <div class="order-logistics-page">
    <div id="map">
      <!-- 渲染地图 -->
      <div class="title">
        <van-icon name="arrow-left" @click="$router.back()" />
        <span>{{ logistics?.statusValue }}</span>
        <van-icon name="service" />
      </div>
      <div class="current">
        <p class="status">
          {{ logistics?.statusValue }} 预计{{ logistics?.estimatedTime }}送达
        </p>
        <p class="predict">
          <span>{{ logistics?.name }}</span>
          <span>{{ logistics?.awbNo }}</span>
        </p>
      </div>
    </div>
    <div class="logistics">
      <p class="title">物流详情</p>
      <van-steps direction="vertical" :active="0">
        <van-step v-for="item in logistics?.list" :key="item.id">
          <p class="status">{{ item.statusValue }}</p>
          <p class="content">{{ item.content }}</p>
          <p class="time">{{ item.createTime }}</p>
        </van-step>
      </van-steps>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.order-logistics-page {
  --van-step-icon-size: 18px;
  --van-step-circle-size: 10px;
}
#map {
  height: 450px;
  background-color: var(--cp-bg);
  overflow: hidden;
  position: relative;
  .title {
    background-color: #fff;
    height: 46px;
    width: 355px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    font-size: 16px;
    position: absolute;
    left: 10px;
    top: 10px;
    box-sizing: border-box;
    box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
    z-index: 999;
    > span {
      flex: 1;
      text-align: center;
    }
    .van-icon {
      font-size: 18px;
      color: #666;
      &:last-child {
        color: var(--cp-primary);
      }
    }
  }
  .current {
    height: 80px;
    border-radius: 4px;
    background-color: #fff;
    height: 80px;
    width: 355px;
    box-sizing: border-box;
    padding: 15px;
    position: absolute;
    left: 10px;
    bottom: 10px;
    box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
    z-index: 999;
    .status {
      font-size: 15px;
      line-height: 26px;
    }
    .predict {
      color: var(--cp-tip);
      font-size: 13px;
      margin-top: 5px;
      > span {
        padding-right: 10px;
      }
    }
  }
}
.logistics {
  padding: 0 10px 20px;
  .title {
    font-size: 16px;
    padding: 15px 5px 5px;
  }
  .van-steps {
    :deep(.van-step) {
      &::after {
        display: none;
      }
    }
    .status {
      font-size: 15px;
      color: var(--cp-text3);
      margin-bottom: 4px;
    }
    .content {
      font-size: 13px;
      color: var(--cp-tip);
      margin-bottom: 4px;
    }
    .time {
      font-size: 13px;
      color: var(--cp-tag);
    }
  }
}
</style>
